<template>
  <div class="headteacher-edit-page">
    <el-card>
      <div class="edit-title">新增班主任</div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="headteacher-form">
        <el-form-item label="班主任：" prop="headTeacherId">
          <el-select v-model="form.headTeacherId" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="teacher in teacherOptions" :key="teacher.id" :label="teacher.name" :value="teacher.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责班级：" required>
          <el-select v-model="form.grade" placeholder="年级" style="width: 48%; margin-right: 4%" @change="handleGradeChange">
            <el-option v-for="grade in gradeOptions" :key="grade" :label="grade" :value="grade" />
          </el-select>
          <el-select v-model="form.classId" placeholder="班级" style="width: 48%">
            <el-option v-for="cls in classOptions" :key="cls.id" :label="cls.className" :value="cls.id" />
          </el-select>
        </el-form-item>
        <div class="form-actions">
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button @click="goBack">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getTeacherList, type TeacherData } from '@/api/teacher';
import { getClassList, updateClass } from '@/api/class';

const router = useRouter();
const formRef = ref();
const form = reactive({
  headTeacherId: '',
  grade: '',
  classId: ''
});

const rules = {
  headTeacherId: [{ required: true, message: '请选择班主任', trigger: 'change' }],
  grade: [{ required: true, message: '请选择年级', trigger: 'change' }],
  classId: [{ required: true, message: '请选择班级', trigger: 'change' }]
};

const teacherOptions = ref<TeacherData[]>([]);
const gradeOptions = ref<string[]>([]);
const classOptions = ref<any[]>([]);
let allClassList: any[] = [];

const fetchTeachers = async () => {
  const res = await getTeacherList({ current: 1, size: 1000 });
  teacherOptions.value = res.data.records;
};

const fetchClasses = async () => {
  const res = await getClassList({ current: 1, size: 1000 });
  allClassList = res.data.records;
  gradeOptions.value = [...new Set(allClassList.map((item: any) => item.grade).filter(Boolean))];
};

const handleGradeChange = () => {
  classOptions.value = allClassList.filter(item => item.grade === form.grade);
  form.classId = '';
};

const handleSubmit = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // 更新班级的 headTeacherId
      const classInfo = allClassList.find(item => item.id === form.classId);
      if (classInfo) {
        await updateClass({ ...classInfo, headTeacherId: form.headTeacherId });
        ElMessage.success('新增成功');
        goBack();
      }
    }
  });
};

const goBack = () => {
  router.back();
};

onMounted(async () => {
  await fetchTeachers();
  await fetchClasses();
});
</script>

<style scoped>
.headteacher-edit-page {
  padding: 40px 24px;
}
.edit-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
}
.headteacher-form {
  background: #fafbfc;
  padding: 24px 16px 8px 16px;
  border-radius: 8px;
}
.form-actions {
  margin-top: 24px;
  text-align: left;
}
</style> 